<script>

import KtTableSaveOfTypeIsDatetime from "/src/components/kantboot/components/KtTable/KtTableSaveOfTypeIsDatetime.vue";

export default {
  components: {KtTableSaveOfTypeIsDatetime},
  props:{
    columns:{
      type: Array,
      default: []
    }
  },
  data() {
    return {
      visible: false,
      form: {},
      layout: 'vertical'
    }
  },
  methods: {
    formChange(column,value){
      console.log(column.field+":"+value);
      // 如果是对象的话，需要使用
      let split = column.field.split('.');
      if(split.length>0){
        for(let i=0;i<split.length-1;i++){
          eval(`this.form.${split[i]} = {}`);
        }
      }

      eval(`this.form.${column.field} = value`);
    },
    handleOk() {
      this.$emit('ok', this.form)
    },
    handleCancel() {
      this.$emit('cancel')
    },
    open(){
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  }
}

</script>

<template>
  <div>
    <a-modal
        title="保存"
        v-model:visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      {{form}}
      <a-form :form="form" :layout="layout">
        <el-scrollbar style="height: calc(100vh - 300px);min-height: 300px;">

            <template
                v-for="column in columns">
              <a-form-item
                  v-if="column.type!=='custom'&&!column.isId"
                  :label="column.label"
                  :name="column.field">
                <a-input
                    v-if="column.type === 'text'"
                    @input="formChange(column,$event.target.value)"
                />
                <el-input
                    v-if="column.type === 'textarea'"
                    @input="formChange(column,$event.target.value)"
                    type="textarea"
                    v-model:value="form.description"/>
                <el-input-number
                    v-if="column.type === 'number'"
                    v-model:value="form.description"/>
                <el-select
                    v-if="column.type === 'enum'"
                    v-model="form.description">
                  <el-option
                      v-for="item in column.enumList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                </el-select>

                <kt-table-save-of-type-is-datetime
                    v-if="column.type === 'datetime'"
                    :column="column"
                    @change="formChange(column,$event)"
                ></kt-table-save-of-type-is-datetime>

              </a-form-item>
            </template>



        </el-scrollbar>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>

</style>